<template>
  <div class="hello">
    <h2>子组件</h2>
    <!-- 2.绑定请求 -->
    <button @click="getMsg1">获取服务器1信息</button>
    <button @click="getMsg2">获取服务器2信息</button>
  </div>
</template>

<script>
  // 1.导入axios
  import axios from 'axios'

  export default {
    name: 'HelloWorld',
    data() {
      return {
        castdata: [],
        weatherdata: []
      }
    },
    methods: {
      //有多个代理第三种写法   async,await
      async getMsg1() {
        try {
          let res = await axios.get('http://localhost:8080/server1/user1')
          this.castdata = res.data
        } catch (error) {
          console.log(error.message);
        }
      },
      async getMsg2() {
        try {
          let res = await axios.get('http://localhost:8080/server2/user2')
          console.log(res.data);
        } catch (error) {
          console.log(error.message);
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>